<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增图片列表')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-common-image-add">
        <input name="modelType" type="hidden" th:value="${modelType}">
        <input name="modelId" type="hidden" th:value="${modelId}">
        <div class="form-group">
            <label class="col-sm-2 control-label"><span style="color: red; ">*</span>图片：</label>
            <div class="col-sm-10">
                <input class="form-control" type="file" id="imageBtn" multiple/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span style="color: red; ">*</span>排序：</label>
            <div class="col-sm-3">
                <input class="form-control" type="number" name="orderNum" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"><span style="color: red; ">*</span>状态：</label>
            <div class="col-sm-3">
                <div class="radio-box" th:each="dict : ${@dict.getType('show_status')}">
                    <input type="radio" th:id="${dict.dictCode}" name="isEnable" th:value="${dict.dictValue}"
                           th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script type="text/javascript">
    var prefix = ctx + "back/commonImage";
    var imageArr = [];
    //上传图片文件
    $("#imageBtn").fileinput({
        // method :
        //  filepreremove 删除未上传的图片触发（删除前）
        //  filesuccessremove 删除上传成功的图片触发（删除前）
        //
        language: 'zh', //设置语言
        dropZoneTitle: '拖拽文件到这里 &hellip;<br>最多可上传5张图片<br>',
        allowedFileExtensions: ['jpg', 'png', 'bmp', 'jpeg'],//接收的文件后缀
        removeFromPreviewOnError: true,
        showCaption: false,//是否显示被选文件的简介
        showRemove: false,//是否显示移除按钮
        showUpload: false, //是否显示上传按钮
        showCancel: false,//是否显示取消按钮
        showClose: false, //是否显示关闭按钮
        dropZoneEnabled: true,//是否显示拖拽区域
        // layoutTemplates: {
        //     actionUpload: '',//去除上传按钮
        //     actionDelete: '',//去除删除按钮
        // },
        maxFileCount: 5,
        overwriteInitial: false,
        initialPreviewAsData: true,
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        uploadUrl: ctx + "back/upload/uploadImage",
        deleteUrl: ctx + "back/upload/deleteImage",
        uploadExtraData: {
            modelType: 99
        }
    }).on('fileuploaded', function (event, data, previewId, index) {
        if (parseInt(data.response.code) === 0) {
            imageArr.push({
                previewId: previewId,
                url: data.response.url
            });
            console.log(imageArr)
        }
    }).on('filesuccessremove', function (event, previewId, index) {
        const isDelete = confirm("确认删除该图片吗!");
        if (isDelete) {
            for (let i = 0; i < imageArr.length; i++) {
                if (imageArr[i].previewId === previewId) {
                    imageArr[i].url = '';
                }
            }
        }
        return isDelete;
    });

    function submitHandler() {
        if ($.validate.form()) {
            let data = $('#form-common-image-add').serializeArray();
            let imageUrlArr = [];
            for (let i = 0; i < imageArr.length; i++) {
                if (imageArr[i].url !== '') {
                    imageUrlArr.push(imageArr[i].url);
                }
            }
            if (imageUrlArr.length == 0) {
                $.modal.alertWarning("请最少上传1张图片！");
                return false;
            }
            data.push({"name": "imageUrls", "value": imageUrlArr.join(',')});
            $.operate.save(prefix + "/add", data);
        }
    }
</script>
</body>
</html>
